<template>
    <div class="breadCrumb">
        <router-link :to="{name:item.name}" href="" v-for="item in data" :key="item.name" :sparator="sparator">{{item.meta.name}}{{ data.length == 1 ? '': '/'}}</router-link>
    </div>
</template>

<script setup>
import {toRefs,watchEffect} from "vue"
//Vue3.2以后 defineEmits defineProps不再需要引入了，已经在全局了
let props =defineProps({
    data:{
        type:Array,
        default(){
            return []
        }
    },
    sparator:{
        type:String,
        default(){
            return "/"
        }
    }
})
let {data,sparator} =toRefs(props)
</script>

<style scoped>
.breadCrumb{
    border: 1px solid #ccc;
    margin: 10px 0;
}
.breadCrumb a{
    font: size 16px;
    font-weight: 700;
    color: black;
    margin: 0 10px;
    text-decoration: none;
}
</style>